<template>
  <div>
<div class="box" ref="boxRef">zhegs 一个box</div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

//模版引用
//1.在模版中使用ref属性,给元素添加一个ref属性,值是一个字符串.
//2.在js中使用ref函数,返回一个对象,对象中包含一个value属性,这个属性就是模版中ref属性的值.

/**
 * ref的作用,绑定DOM元素,操作DOM元素.
 */
const boxRef=ref(null)
//💕 直接打印是打印不出来的,因为ref绑定的是DOM元素,需要在onMounted中打印.
console.log(boxRef.value)
onMounted(()=>{
console.log(boxRef.value)
boxRef.value.style.color='red'
})
</script>

<style lang="scss" scoped>

</style>